<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link rel="stylesheet" href="//static/plugins/bootstrapValidator/bootstrapValidator.min.css"/>
    <link href="//static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link rel="stylesheet" href="//static/css/index_s.css">
    <link rel="stylesheet" href="//static/css/public.css">
    <link rel="stylesheet" href="//static/css/font-awesome.min.css">
    <link href="//static/css/loss_Statistics.css" rel="stylesheet">
    <style type="text/css">
        /*图片盒子信息列表*/
        .imgTable-Box {
            position: absolute;
            bottom: 10px;
            left:10px;
            width: 480px;
            font-size: 12px;
            color: #333;
        }

        /*图片盒子table块*/

        .imgTable-Line {
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #666;
        }

        .imgTable-radio {
            width: 20px;
            height: 20px;
            border: 1px solid #8e8e8e;
            border-radius: 50%;
            display: inline-block;
            margin-top: 4px;
            background-color: #929292;
        }

        .imgTable-colorLight {
            background-color: #fff;
        }

        .imgTable-colorDark {
            background-color: #a0b7ce;
        }

        .equimentDetail-hover:hover {
            background-color: #C1D2E0;
            cursor: pointer;
        }
    </style>
</head>

<body style="height: 100%">
<!--图表块-->
<div style="height: 100%;" id="app">
    <!--选项卡切换-->
    <ul id="myTab" class="nav nav-tabs content-title">
        <li style="float:left;padding: 8px 0 0 15px;">
            <h5>详情页面</h5>
        </li>
        <li v-for="(tab,index) in menuList" v-bind:class="{active:tab.isActive}">
            <a data-toggle="tab" @click="tabsSwitch(index)">{{tab.name}}</a>
        </li>
    </ul>
    <div class="content-center">
        <!--图片结构块-->
        <div class="tab-card" style="position: relative;" v-bind:class="{showCard: menuList[4].isActive}">
            <img src="//static/image/equipmentImg.png" style="width: 100%;">
            <!--列表结构块-->
            <div class="imgTable-Box float-clear">
                <!--第一个表-->
                <div class="float-left">
                    <div class="float-clear imgTable-colorDark" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 50px;"></div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>一号泵</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>二号泵</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>三号泵</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>四号泵</span>
                        </div>
                    </div>
                    <div class="float-clear imgTable-colorLight" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>工频运行</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                    </div>
                    <div class="float-clear imgTable-colorLight" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>变频运行</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio" style="background-color:#00d271;"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                    </div>
                    <div class="float-clear imgTable-colorLight" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <span>泵故障</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 50px;">
                            <div class="imgTable-radio"></div>
                        </div>
                    </div>
                </div>
                <!--第三个表-->
                <div class="float-right" style="width: 200px;">
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>变频器电流(A)</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>6.86</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>变频器频率(HZ)</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>40.72</span>
                        </div>
                    </div>

                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>进水压力(Kg/cm2)</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>1.92</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>出水压力(Kg/cm2)</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>7.72</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>设定压力(Kg/cm2)</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>7.80</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>远控</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>正常</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>声光警报</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>正常</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>变频器故障</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>正常</span>
                        </div>
                    </div>
                    <div class="float-clear">
                        <div class="float-left imgTable-Line imgTable-colorDark" style="width:110px;">
                            <span>手自动切换</span>
                        </div>
                        <div class="float-left imgTable-Line imgTable-colorLight equimentDetail-hover"
                             style="width: 90px;"
                             @click="jump()">
                            <span>正常</span>
                        </div>
                    </div>
                </div>
                <!--第二个表-->
                <div class="float-left" style="margin-top: 59px;">
                    <div class="float-clear imgTable-colorDark" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio" style="background-color:#00d271;"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>运行</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>未运行</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio" style="background-color:#D22600;"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>报警</span>
                        </div>
                    </div>
                    <div class="float-clear imgTable-colorLight" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio" style="background-color:#00d271;"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>泵运行</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>泵未知</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>泵故障</span>
                        </div>
                    </div>
                    <div class="float-clear imgTable-colorLight" style="width: 250px;">
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <div class="imgTable-radio" style="background-color:#D22600;"></div>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;">
                            <span>泵停止</span>
                        </div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;"></div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;"></div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;"></div>
                        <div class="float-left imgTable-Line" style="width: 41.66px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--列表结构块-->
        <div class="tab-card" v-bind:class="{showCard: menuList[3].isActive}">
            <!--列表结构-->
            <div class="fixed-table-container" style="height: 635px; padding-bottom: 40px;background-color: #fff;">
                <div class="fixed-table-header" style="margin-right: 0px;">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th style="width: 6%;padding: 0;">
                                <div class="th-inner">编号</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner">设备</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner ">数据项</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner ">当前值</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner">更新时间</div>
                            </th>
                            <th style="width: 6%;padding: 0;">
                                <div class="th-inner ">单位</div>
                            </th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="fixed-table-body">
                    <div class="text-center" v-if="pending">正在努力地加载数据中，请稍候……</div>
                    <table>
                        <tbody>
                        <tr class="text-center" v-if="personalList.length==0 && !pending">
                            <td colspan="7">没有找到匹配的记录</td>
                        </tr>
                        <tr class="border-bottom equimentDetail-hover" v-for="item in personalList" @click="jump()">
                            <td style="width: 6%;padding: 0;">
                                <div class="th-inner">{{item.no}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner">{{item.userName}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner ">{{item.date}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner ">{{item.value}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner">{{item.time}}</div>
                            </td>
                            <td style="width: 6%;padding: 0;">
                                <div class="th-inner ">MPa</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="fixed-table-pagination">
                    <div class="pull-left pagination-detail"><span class="pagination-info">显示第 1 到第 {{personalList.length}} 条记录，总共 {{personalList.length}} 条记录</span>
                    </div>
                    <div class="pull-right pagination">
                        <ul class="pagination">
                            <li class="page-pre">
                                <a href="javascript:void(0)">‹</a>
                            </li>
                            <li>
                                <a class="active" href="javascript:void(0)">1</a>
                            </li>
                            <li class="page-next">
                                <a href="javascript:void(0)">›</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--能耗结构块-->
        <div class="tab-card" v-bind:class="{showCard: menuList[2].isActive}">
            <div class="gray-bg">
                <div class="wrapper wrapper-content">
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5>本日耗电</h5>
                                    <h1 class="no-margins">880</h1>
                                    <div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
                                    <small>度/千立方米</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5>本周耗电</h5>
                                    <h1 class="no-margins">8,200</h1>
                                    <div class="stat-percent font-bold text-navy">98%</div>
                                    <small>度/千立方米</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5>本月耗电</h5>
                                    <h1 class="no-margins">21000</h1>
                                    <div class="stat-percent font-bold text-danger">12%</div>
                                    <small>度/千立方米</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5>本年耗电</h5>
                                    <h1 class="no-margins">54,200</h1>
                                    <div class="stat-percent font-bold text-danger">24%</div>
                                    <small>度/千立方米</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>百分比</h5>
                                    <div style="box-sizing:border-box;" id="chartp">
                                        <div id="echarts-pie-chart" style="width:200%;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>百分比</h5>
                                    <div style="box-sizing:border-box;">
                                        <div id="echarts-pie-chart-two" style="width: 200%;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>百分比</h5>
                                    <div style="box-sizing:border-box;">
                                        <div id="echarts-pie-chart-three" style="width: 200%;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>百分比</h5>
                                    <div style="box-sizing:border-box;">
                                        <div id="echarts-pie-chart-four" style="width: 200%;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>最高最低平均</h5>
                                    <div id="echarts-line-chart" style="width: 300%;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>最高最低平均</h5>
                                    <div id="echarts-line-chart-two" style="width: 300%;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>最高最低平均</h5>
                                    <div id="echarts-line-chart-three" style="width: 300%;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <h5>最高最低平均</h5>
                                    <div id="echarts-line-chart-four" style="width: 300%;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5 class="m-b-md">与昨天比</h5>
                                    <h2 class="text-navy"><i class="fa fa-play fa-rotate-270"></i>上升</h2>
                                    <small>更新时间：just now</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content ">
                                    <h5 class="m-b-md">与上周比</h5>
                                    <h2 class="text-navy"><i class="fa fa-play fa-rotate-270"></i>上升</h2>
                                    <small>更新时间：just now</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5 class="m-b-md">与上月比</h5>
                                    <h2 class="text-danger"><i class="fa fa-play fa-rotate-90"></i>下降</h2>
                                    <small>更新时间：just now</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <h5 class="m-b-md">与去年比</h5>
                                    <h2 class="text-danger"><i class="fa fa-play fa-rotate-90"></i> 下降</h2>
                                    <small>更新时间：just now</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--报警结构块-->
        <div class="tab-card" v-bind:class="{showCard: menuList[1].isActive}">
            <!--列表结构-->
            <div class="fixed-table-container" style="height: 635px; padding-bottom: 40px;background-color: #fff;">
                <div class="fixed-table-header" style="margin-right: 0px;">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th style="width: 6%;padding: 0;">
                                <div class="th-inner">名称</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner">类型</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner ">值</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner ">报警类型</div>
                            </th>
                            <th style="width: 12%;padding: 0;">
                                <div class="th-inner">开始时间</div>
                            </th>
                            <th style="width: 6%;padding: 0;">
                                <div class="th-inner ">结束时间</div>
                            </th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="fixed-table-body">
                    <div class="text-center" v-if="pending">正在努力地加载数据中，请稍候……</div>
                    <table>
                        <tbody>
                        <tr class="text-center" v-if="personalList.length==0 && !pending">
                            <td colspan="7">没有找到匹配的记录</td>
                        </tr>
                        <tr class="border-bottom equimentDetail-hover" v-for="item in personalList" @click="jump()">
                            <td style="width: 6%;padding: 0;">
                                <div class="th-inner">{{item.no}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner">{{item.type}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner ">{{item.value}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner ">{{item.Alarm_type}}</div>
                            </td>
                            <td style="width: 12%;padding: 0;">
                                <div class="th-inner">{{item.start_time}}</div>
                            </td>
                            <td style="width: 6%;padding: 0;">
                                <div class="th-inner ">{{item.End_time}}</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="fixed-table-pagination">
                    <div class="pull-left pagination-detail"><span class="pagination-info">显示第 1 到第 {{personalList.length}} 条记录，总共 {{personalList.length}} 条记录</span>
                    </div>
                    <div class="pull-right pagination">
                        <ul class="pagination">
                            <li class="page-pre">
                                <a href="javascript:void(0)">‹</a>
                            </li>
                            <li>
                                <a class="active" href="javascript:void(0)">1</a>
                            </li>
                            <li class="page-next">
                                <a href="javascript:void(0)">›</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--视讯结构块-->
        <div class="tab-card" v-bind:class="{showCard: menuList[0].isActive}">
            <iframe src="/core/secondSupply/video" width="100%" height="100%"></iframe>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="//static/js/jquery.min.js"></script>
<!-- Sparkline -->
<script src="//static/js/jquery.sparkline.min.js"></script>
<!-- peity demo data -->
<script src="//static/js/echarts.min.js"></script>
<script src="//static/js/sum.js" type="text/javascript" charset="utf-8"></script>
<script src="//static/js/sum_table.js" type="text/javascript" charset="utf-8"></script>
<script src="//static/js/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            oldIndex: 4,
            menuList: [
                {
                    name: "视讯",
                    isActive: false
                },
                {
                    name: "报警",
                    isActive: false
                },
                {
                    name: "能耗",
                    isActive: false
                },
                {
                    name: "列表",
                    isActive: false
                },
                {
                    name: "组态",
                    isActive: true
                },
            ],
            personalList: [],
            pending: false
        },
        created: function () {
            this.pending = true;
            setTimeout(function () {
                var index = 0;
                for (var i = 0; i < 107; i++) {
                    index++;
                    vm.personalList.push({
                        no: index,
                        userName: '设备' + index,
                        date: '压力' + index,
                        type: '液压' + index,
                        value: '20' + index,
                        Alarm_type: '高级',
                        time: '2018-1-10',
                        start_time: '2018-5-10',
                        End_time: '2018-5-10'
                    });
                }
                vm.pending = false;
            }, 1000)
        }
    });

    //点击切换列表
    function tabsSwitch(index) {
        vm.menuList[vm.oldIndex].isActive = false;
        vm.oldIndex = index;
        vm.menuList[index].isActive = true;
    }

    //跳转到详情三级页面
    function jump() {
        window.location.href = "equipmentDetailTwo.html";
    };
</script>
</body>
</html>